<!-- <nz-spin [nzSpinning]="userLoading"> -->
<div class="main">
    <div class="left">
        <form nz-form [formGroup]="form">
            <nz-form-item>
                <nz-form-label [nzSpan]="5">姓名</nz-form-label>
                <nz-form-control [nzSpan]="12">
                    <input nz-input formControlName="fName" placeholder="" autocomplete="off">
                </nz-form-control>
            </nz-form-item>
            <!-- <nz-form-item>
                <nz-form-label [nzSpan]="5">昵称</nz-form-label>
                <nz-form-control [nzSpan]="12">
                    <input nz-input formControlName="fNickName" placeholder="" autocomplete="off">
                </nz-form-control>
            </nz-form-item> -->
            <!-- <nz-form-item>
                <nz-form-label [nzSpan]="5">性别</nz-form-label>
                <nz-form-control>
                    <nz-radio-group formControlName="fGender">
                        <label nz-radio nzValue="1" [nzDisabled]="true">男</label>
                        <label nz-radio nzValue="0" [nzDisabled]="true">女</label>
                    </nz-radio-group>
                </nz-form-control>
            </nz-form-item> -->
            <nz-form-item>
                <nz-form-label [nzSpan]="5" nzRequired>手机</nz-form-label>
                <nz-form-control [nzSpan]="12" [nzErrorTip]="PhoneErrorTpl">
                    <input nz-input formControlName="fPhone" placeholder="" autocomplete="off">
                </nz-form-control>
                <ng-template #PhoneErrorTpl>
                    <ng-container *ngIf="fPhone.dirty && fPhone.errors?.required">必填</ng-container>
                    <ng-container *ngIf="fPhone.dirty && fPhone.errors?.pattern">格式不正确</ng-container>
                </ng-template>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="5">微信</nz-form-label>
                <nz-form-control [nzSpan]="12">
                    <input nz-input formControlName="fWeChat" placeholder="" autocomplete="off">
                </nz-form-control>
            </nz-form-item>
            <!-- <nz-form-item>
                <nz-form-label nzRequired [nzSpan]="5">年龄</nz-form-label>
                <nz-form-control nzErrorTip="年龄必填" [nzSpan]="12">
                    <nz-input-number formControlName="fAge" [nzMin]="18" [nzMax]="80" [nzStep]="1" [nzFormatter]="formatterAge" [nzParser]="parserAge"></nz-input-number>
                </nz-form-control>
            </nz-form-item> -->
            <nz-form-item>
                <nz-form-label [nzSpan]="5">住址</nz-form-label>
                <nz-form-control [nzSpan]="16">
                    <textarea formControlName="fHomeAddress" nz-input rows="3"></textarea>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="5">简介</nz-form-label>
                <nz-form-control [nzSpan]="16">
                    <textarea formControlName="fProfile" nz-input rows="3"></textarea>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control [nzSpan]="16" [nzOffset]="8">
                    <button nz-button nzType="primary" (click)="update()" [nzLoading]="loading">更新</button>
                </nz-form-control>
            </nz-form-item>
        </form>
    </div>
    <div class="right">
        <div class="avatar" *ngIf="headImgUrl"><img [src]="headImgUrl"></div>
        <div class="avatar" *ngIf="!headImgUrl">
            <div [style.background-color]="firstNameBgColor">{{firstName}}</div>
        </div>

        <div class="over-avatar" (click)="showAvatarDialog()">更换头像</div>
    </div>
</div>
<!-- </nz-spin> -->
<dialog-avatar (onSave)="getUser()" #DialogAvator></dialog-avatar>